<template>
  <div id="app">
    <div class="container">
      <!-- 动态加载图像 -->
      <img v-for="image in images" :key="image.identifier" :src="'http://zyhjxy.cn' + image.style.url" :style="{
        top: `${image.style.position.y}px`,
        left: `${image.style.position.x}px`,
        width: `${image.style.position.w}px`,
        height: `${image.style.position.h}px`,
        transform: image.style.transformType,
        visibility: image.style.hasOwnProperty('visible') ? (image.style.visible ? 'visible' : 'hidden') : 'visible'
      }">

      <!-- 显示文本 -->
      <div v-for="text in texts" :key="text.identifier" class="text" :style="{
        top: `${text.style.position.y}px`,
        left: `${text.style.position.x}px`,
        width: `${text.style.position.w}px`,
        height: `${text.style.position.h}px`,
        color: text.style.foreColor,
        textAlign: text.style.textAlign,
        fontSize: `${text.style.fontSize}px`,
        fontFamily: text.style.fontFamily,
        visibility: text.style.visible ? 'visible' : 'hidden',
        backgroundColor: text.style.backColor,
        lineHeight: `${text.style.position.h}px`,
      }">
        {{ text.style.text }}
      </div>

      <!-- 显示计时器 -->
      <div v-if="showTimer" class="timer" :style="{
        top: `${timer.style.position.y}px`,
        left: `${timer.style.position.x}px`,
        width: `${timer.style.position.w}px`,
        height: `${timer.style.position.h}px`
      }">
        {{ timer.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isData: {
      type: String,
      default: '{}'
    }
  },
  data() {
    return {
      jsonData: {},
      images: [],
      texts: [],
      showTimer: false,
      timer: {}
    };
  },
  watch: {
    isData: {
      handler(newVal, oldVal) {
        if (newVal !== oldVal) {
          this.jsonData = JSON.parse(newVal);
          this.handleTimerEvent()
        }
      },
    },
  },
  mounted() {

  },
  methods: {
    handleTimerEvent() {

      this.images = this.jsonData.components.filter(comp => comp.type === 'image');
      this.texts = this.jsonData.components.filter(comp => comp.type === 'text');
      this.timer = this.jsonData.components.find(comp => comp.type === 'timer');
      if (this.timer) {
        this.showTimer = true;
      }
    }
  }
};
</script>

<style scoped>
.container {
  position: relative;
  width: 1366px;
  height: 798px;
  background-color: rgba(0, 0, 0, 0.01);
  /* border: 1px solid #ccc; */
  overflow: auto;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  transition: all 0.3s ease;
}

.text {
  position: absolute;
}

.timer {
  position: absolute;
  top: 0;
  left: 0;
  color: #00CED1;
  text-align: center;
  font-size: 30px;
  font-family: Arial;
}
</style>